<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    <style>
      body {
        margin: 0;
        overflow: hidden;
      }
    </style>
  </head>
  
  <body>
    <div style="background-color: pink"></div>
  </body>
  
  <script>
    function adaptive() {
      // 1.获取视窗大小并保存于变量
      let width = window.innerWidth;
      let height = window.innerHeight;
      
      // 2.设置大小为视窗大小
      let div = document.querySelector('div');//获取div容器dom
      div.style.width = width + 'px';
      div.style.height = height + 'px';
    }
    
    // 渲染后执行
    adaptive();
    
    // 窗口大小改变后执行，onresize事件监听视窗大小改变
    window.onresize = function () {
      adaptive();
    };
  </script>
</html>